<template>
	<Root>
		<div class="diningEvaluation">
			<div class="card">
				<div class="title border">您对食堂满意吗？</div>
				<div class="img-wrapper">
					<image @click="score = 1" class="icon" :src="score === 1 ? '/static/images/suggest/1_score_active.png' : '/static/images/suggest/1_score.png'"></image>
					<image @click="score = 2" class="icon" :src="score === 2 ? '/static/images/suggest/2_score_active.png' : '/static/images/suggest/2_score.png'"></image>
					<image @click="score = 3" class="icon" :src="score === 3 ? '/static/images/suggest/3_score_active.png' : '/static/images/suggest/3_score.png'"></image>
					<image @click="score = 4" class="icon" :src="score === 4 ? '/static/images/suggest/4_score_active.png' : '/static/images/suggest/4_score.png'"></image>
					<image @click="score = 5" class="icon" :src="score === 5 ? '/static/images/suggest/5_score_active.png' : '/static/images/suggest/5_score.png'"></image>
				</div>
			</div>
			<div class="card">
				<div class="title">评价</div>
				<u--textarea v-model="desc"backgroundColor="#fbfbfb" placeholder="请输入综合评价" count ></u--textarea>
			</div>
			<div class="card">
				<div class="title">上传图片</div>
				<u-upload
				    :fileList="fileList"
						:previewFullImage="true"
						:multiple="false"
				    @afterRead="afterRead"
				    @delete="deletePic"
				    :maxCount="10"
				  ></u-upload>
			</div>
			<u-button @click="submitForm" :loading="loading" class="btn" color="#5760ed" size="large" :plain="true" text="确认提交"></u-button>
		</div>
	</Root>
</template>

<script setup>
import { ref, computed } from 'vue'
import { baseUrl } from '/http/request.js'
import { submitReview } from '/http/api.js'

const projectId = computed(() => uni.getStorageSync('projectId'))	
const desc = ref('')
const score = ref(5)
const fileList = ref([])
const loading = ref(false)

const afterRead = async (e) => {
	console.log(e);
	let fileListLen = fileList.value.length;
	fileList.value[fileListLen] = {
		...e.file,
		status: "uploading",
		message: "上传中",
	}
	uni.uploadFile({
		url: `${baseUrl}/file/upload`,
		file: e.file,
		name: 'file',
		filePath: e.file.url,
		header: {
			'Authorization': `Bearer ${uni.getStorageSync('token')}`
		},
		success(res) {
			const resDataStr = res.data || null
			if(resDataStr) {
				const resData = JSON.parse(resDataStr)
				if(resData.code == 200) {
					fileList.value[fileListLen].status = 'success'
					fileList.value[fileListLen].url = resData.data.url
				} else {
					uni.showToast({ title: resData.msg, icon: 'none' })
					fileList.value[fileListLen].status = 'error'
				}
			}
		},
		fail(res) {
			console.log('upload fail', res);
		}
	})
}

const deletePic = (e) => {
	fileList.value.splice(e.index, 1)
}

const submitForm = async () => {
	try {
		const data = {
			projectId: projectId.value,
			reviewStar: score.value,
			reviewInfo: desc.value,
			imgUrl: fileList.value.length ? fileList.value.map(v => v.url).join(',') : ''
		}
		loading.value = true
		await submitReview(data)
		loading.value = false
		uni.showToast({
			title: '已提交',
			icon:'none'
		})
		setTimeout(() => {
			uni.navigateBack()
		}, 1000)
	} catch (error) {
		loading.value = false
		//TODO handle the exception
		console.log(error);
	}
}
</script>

<style lang="scss">
.diningEvaluation{
	height: 100%;
	background-color: #f5f6fa;
	padding: 24rpx;
	box-sizing: border-box;
	.btn{
		margin-top: 100rpx;
	}
	.card{
		border-radius: 16rpx;
		background-color: #fff;
		padding: 24rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		.title{
			font-size: 34rpx;
			font-weight: 800;
			margin-bottom: 20rpx;
		}
		.border{
			padding-bottom: 14rpx;
			border-bottom: 1px solid #efefef;
		}
		.img-wrapper{
			display: flex;
			align-items: center;
			.icon{
				width: 80rpx;
				height: 80rpx;
				margin-right: 16rpx;
			}
		}
	}
}
</style>
